import React,{useEffect,useState} from "react";
import axios from "axios";

import DiscountItem from "./DiscountItem";

import style from './index.module.css'
const {special_offer,title,vegetableList,vegetableListBox} = style

export interface Ivegetable {
    _id:string,
    name:string,
    address:string,
    price:number,
    beforePrice:number,
    soldOut:boolean,
    memberDiscount:number,
    monthlySale:number,
}
    


export default function SpecialOffer(){

    const [vegetable,setVegetable] =useState<Ivegetable[]>()

    useEffect(() => {
        axios.get(`/api/vegetableClassification?type=特价&limit=0`)
        .then(res=>{
            const result = res.data as Ivegetable[]
            setVegetable(result)
        })
            .catch(error=>{
            })
        
    }, [])

    return (
        <div className={special_offer}>
            <ul className={title}>
                <li>特价抢购</li>
                <li>本周有{vegetable?.length}种特价商品哦～</li>
            </ul>
            <div className={vegetableListBox}>
            <ul className={vegetableList} style={{width:vegetable?.length as number * 25 + 'rem'}}>
                {
                    vegetable?.map(item=>{
                        return (
                            <DiscountItem {...item} key={item._id}/>
                        )
                    })
                }
            </ul>
            </div>
        </div>
    )
}